<template>
  <div class="">
    <div class="banner">
      <van-swipe class="bannerBox" :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in obj.bannerObj.pics" :key="image">
          <img :src="image.pic" />
        </van-swipe-item>
      </van-swipe>
      <div @click="$router.go(-1)" id="fan">
        <p>
          <i class="van-icon van-icon-arrow-left"><!----></i>
        </p>
      </div>
    </div>
    <div class="content">
      <div v-html="obj.basicInfo.name"></div>
      <div v-html="obj.basicInfo.characteristic"></div>
      <div>
        <span>
          <p>低价￥{{ obj.basicInfo.minPrice }}</p>
          <p>原价￥{{ obj.basicInfo.minBuyNumber }}</p>
        </span>

        <p>库存{{ obj.basicInfo.stores }}</p>
      </div>
    </div>
    <div>
      <div class="priceTap">
        <div @click="flag = !flag" :class="flag ? 'active' : ''">商品价格</div>
        <div @click="flag = !flag" :class="!flag ? 'active' : ''">商品评价</div>
      </div>
      <div class="evaluate" v-html="obj.bannerObj.content" v-if="flag"></div>
      <div v-else>
        <appraiseBox
          :item="v"
          v-for="(v, i) in obj.appraiseObj"
          :key="i"
        ></appraiseBox>
      </div>
    </div>
    <br /><br />
    <div class="footer">
      <p>立即发起砍价，最低可砍到1元</p>
    </div>
  </div>
</template>

<script>
import { getDetails, appraise } from "@/api";
import { useRoute, useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { Toast } from "vant";
import appraiseBox from "@/components/cardComponents/appraiseBox"; // 评论
export default {
  components: {
    appraiseBox,
  },
  setup() {
    let route = useRoute();
    let router = useRouter();
    let store = useStore();
    let flag = ref(true);
    let show = ref(false);
    let shppingActive = ref([]); //必须是一个数组 商品激活选中样式
    let shoppingnum = ref(0);
    let obj = reactive({
      bannerObj: {},
      basicInfo: {},
      appraiseObj: [],
      classify: [],
    });
    getDetails(route.query.id).then((res) => {
      obj.bannerObj = res;
      obj.basicInfo = res.basicInfo; // 详情分类
      console.log(obj.basicInfo);
      obj.classify = res.properties; // 商品的规格
      console.log(obj.classify);
    });
    appraise(route.query.id).then((res) => {
      obj.appraiseObj = res;
    });
    function isFlag() {
      show.value = true;
    }

    return {
      obj,
      flag,
      show,
      isFlag,
      shppingActive,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-badge {
  top: -10px;
  right: -10px;
}
#fan {
  width: 65px;
  height: 65px;
  padding: 0.06rem;
  border-radius: 50%;
  border: 0.02rem solid #ffffff;
  position: fixed;
  left: 20px;
  top: 20px;
  text-align: center;
  line-height: 60px;
  z-index: 123;
  p {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    text-align: center;
    i {
      font-size: 30px;
      color: #666;
      margin-top: 0.02rem;
    }
  }
}
.joinShopping {
  width: 100%;
  height: 100px;
  background-color: #b7282e;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 33px;
  color: #fff;
  justify-content: center;
}
.active2 {
  border: 2px solid #c55257 !important;
}
.bannerBox {
  width: 100%;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
.boxclassify {
  position: relative;
  width: 100%;
  height: 100%;
  div {
  }
}

.cardActionNumber {
  display: flex;
  p {
    display: table;
    padding: 12px 5px;
    margin: 10px;
    border: 2px solid rgb(99, 98, 98);
    border-radius: 10px;
  }
}
.sopping {
  border-top: 1px solid rgb(219, 216, 216);
  display: flex;
  justify-content: space-between;
  padding: 40px 30px 30px 30px;
  height: 242px;
}
.popup,
p {
  font-size: 28px;
}
.popup {
  border-bottom: 1px solid rgb(211, 208, 208);
  height: 180px;
  display: flex;
  aside {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  img {
    width: 130px;
    height: 130px;
    margin: 20px;
  }
}
h5 {
  font-size: 30px;
}
.cardAction {
  width: 100%;
  padding: 30px 0;
  h5 {
    margin: 20px 10px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    p {
      display: table;
      padding: 17px 9px;
      margin: 10px;
      border: 2px solid rgb(141, 138, 138);
      border-radius: 10px;
    }
  }
}

.banner {
  width: 100%;
  height: 800px;
}
.footer {
  width: 100%;
  height: 93px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  box-shadow: 0 0 5px 1px #bebebe;
  justify-content: center;
  align-items: center;
  background-color: #b7282e;
  color: #fff;
}
.content {
  width: 100%;
  font-size: 26px;
  height: 220px;
  background-color: #fff;
  border-top: 1px solid rgb(165, 162, 162);
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  div {
    &:nth-of-type(1) {
      font-size: 33px;
      margin: 0 12px;
    }
    &:nth-of-type(2) {
      font-size: 24px;
      color: rgb(88, 86, 86);
      margin: 0 12px;
    }
    &:nth-of-type(3) {
      color: rgb(134, 131, 131);
      span {
        display: flex;
        align-items: center;
        justify-self: center;
        margin: 0 5px;
        p {
          &:nth-of-type(1) {
            color: red;
          }
        }
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    p {
      margin: 0 12px;
    }
  }
}
.card {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid #000;
}
.priceTap {
  margin-top: 20px;
  width: 100%;
  display: flex;
  div {
    flex: 1;
    height: 80px;
    background-color: #fff;
    font-size: 26px;
    line-height: 80px;
    text-align: center;
  }
}
.active {
  border-bottom: 1px solid rgb(161, 9, 9);
}
</style>
